<!--
 * @Descripttion: 
 * @version: 
 * @Author: Jf W
 * @Date: 2021-08-09 13:40:53
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-08-23 17:17:30
-->
<template>
  <div>
    <el-button type="text" @click="dialogVisible = true" class="add-button">+新增</el-button>

    <el-dialog
      title="创建"
      v-model="dialogVisible"
      width="30%"
      >
      <el-input v-model="input" placeholder="请输入内容"></el-input>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="methods.createSoure">创 建</el-button>
          <el-button @click="dialogVisible = false">取 消</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
// import TableList from './TableList.vue'

export default defineComponent({
  components: {
    // TableList
  },
  setup() {
    const router = useRouter()

    let dialogVisible = ref(false)
    let input = ref('请输入要创建的名称')
    let methods = reactive({
      createSoure() {
        dialogVisible.value = false
        router.push({ path: '/' }) // 跳转到对应详情页面 to do
      }
    })
    const tableData = reactive([
      {
        companyId: '123456',
        insurance: '阳光险',
        insuranceCompany: '中国平安',
        director: '王小虎',
        company: '华程国旅',
        handleFunction: '删除'
      },
      {
        companyId: '123456',
        insurance: '阳光险',
        insuranceCompany: '中国平安',
        director: '王小虎',
        company: '华程国旅',
        handleFunction: '删除'
      }
    ])
    return {
      dialogVisible,
      input,
      methods,
      tableData
    }
  }
})
</script>

<style lang="scss" scoped>
.add-button {
  background-color: #199ED8;
  color: #fff;
  padding: 5px 10px;
}
:deep .el-dialog__header {
    background-color: #F6F6F6;
    border-radius: 4px 4px 0px 0px;
    padding-top: 10px;
  }
:deep .el-dialog__headerbtn {
  top: 14px;
}
:deep .el-dialog__footer {
  background-color: #F6F6F6;
  padding-bottom: 10px;
  border-radius: 0px 0px 4px 4px;
}
</style>